<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script type="text/javascript" src="./jquery.js"></script>
   <!--引入WebUploader文件上传的CSS-->
   <link rel="stylesheet" type="text/css" href="./webuploader.css" media="screen" />
   <!--引入WebUploader文件上传的JS-->
   <script type="text/javascript" src="./webuploader.js"></script>
   <style>
       .maskUpload{
           width: 300px;
           height: 300px;
           background-color: blueviolet;
       }
   </style>
</head>
<body>
   <!--用来存放文件信息-->
   <div class="uploader-demo">
       <div class="btns">
           <div id="filePicker">选择文件</div>
           <button id="ctlBtn" class="mybutton" onclick="upload_imgs()">开始上传</button>
           <!-- 拖曳遮罩层，拖到这个dom 上获取文件 -->
           <div class="maskUpload"></div>
       </div>
   </div>
   <script type="text/javascript">
       var uploader;
       $(function(){
           //初始化Web Uploader,每上传一个文件都会创建一个uploader对象，同时选择多个文件时，则会创建多个uploader对象。
           uploader = WebUploader.create({
               // 选完文件后，是否自动上传。
               auto: false,     //true时，选择文件后自动上传。
               // swf文件路径
               swf: 'Uploader.swf',
               // 文件接收服务端 --- 服务器地址
               server: 'upload/uploadImg',
               // 选择文件的按钮。可选。
               pick: '#filePicker',
               dnd: ".maskUpload",  // 遮罩层
               accept: {
                   title: '文件上传',
                   //支持上传的文件类型
                   extensions: 'jpg,jpeg,png,doc,xlsx',
                   mimeTypes: '*'
               }
           });
           
           //当文件被加入队列时触发
           uploader.on('fileQueued',function (file) {
               console.log(file);
           });
           //队列中所有文件上传结束时触发
           uploader.on('error', (type) => {
               console.log('上传文件类型不支持时触发');
           });
           
           //文件上传中实时返回进度 --- 上传时的实时回调
           uploader.on('uploadProgress', (file, percentage) => {
               console.log('上传进度'+ percentage);
           });
           //文件上传成功时触发
           uploader.on("uploadSuccess",function (file,response) {
               console.log('上传成功');
           });
           //文件上传错误时触发
           uploader.on('uploadError', (file, reason) => {
               console.log('上传失败');
           });
           //队列中所有文件上传结束时触发
           uploader.on('uploadFinished', (file, reason) => {
               console.log('上传结束');
           });
       })
   
       //上传图片
       function upload_imgs() {
           if (uploader){
               uploader.upload();
           }
       }
   </script>
</body>
</html>
